<!--
 * @FileDescription 车道线识别
 * @Author 杨宇翔
 * @Date 20220815 14:52:33
 * @LastEditors 杨宇翔
 * @LastEditTime 20220815 14:52:33
-->
<template>
    <div class="lane-settings">
        <div class="slider-group-container">
            <span>视频模糊降噪</span>
            <div class="slider-group">
                <span>模糊程度</span>
                <input class="blur-slider" type="range" name="车道线识别" id="车道线识别 - 模糊程度" min="1" max="5" step="0.001"
                    v-model="LaneSettingsComponent.Default.BlurLevel.value">
            </div>
        </div>

        <div class="area-group">
            <span>车道线所在区域</span>
            <canvas ref="canvas"></canvas>

            <div class="point" v-for="point of LaneSettingsComponent.Default.Points" :key="point.Name">
                <span>{{ point.Name }}</span>
                <span>W</span>
                <input class="reset" type="number" min="0" max="100" @input="OnInput" v-model="point.X">
                <span>%</span>
                <span>H</span>
                <input class="reset" type="number" min="0" max="100" @input="OnInput" v-model="point.Y">
                <span>%</span>
            </div>
        </div>

        <div class="detection-group-container">
            <span>边缘检测阈值</span>
            <div class="detection-group">
                <span>最低</span>
                <input class="reset" type="number" min="0" max="255" step="1" @input="OnInput"
                    v-model="LaneSettingsComponent.Default.CannyLow.value">
                <span>最高</span>
                <input class="reset" type="number" min="0" max="255" step="1" @input="OnInput"
                    v-model="LaneSettingsComponent.Default.CannyHigh.value">
            </div>
        </div>

        <div class="settings-group-container">
            <span>车道线区域设置</span>
            <div class="settings-group">
                <input type="checkbox" v-model="LaneSettingsComponent.Default.ShowLaneState.value" id="showLaneState"
                    hidden>
                <label for="showLaneState">
                    <img
                        :src="LaneSettingsComponent.Default.ShowLaneState.value ? '/static/BinocularCamera/ic_checkbox_select.png' : '/static/BinocularCamera/ic_checkbox_normal.png'">
                    <span>显示车道区域</span>
                </label>
                <input class="reset" type="color" v-model="LaneSettingsComponent.Default.LaneColor.value"
                    id="laneColor">
            </div>
            <div class="settings-group">
                <input type="checkbox" v-model="LaneSettingsComponent.Default.ShowAreaState.value" id="showAreaState"
                    hidden>
                <label for="showAreaState">
                    <img
                        :src="LaneSettingsComponent.Default.ShowAreaState.value ? '/static/BinocularCamera/ic_checkbox_select.png' : '/static/BinocularCamera/ic_checkbox_normal.png'">
                    <span>显示车道线</span>
                </label>
                <input class="reset" type="color" v-model="LaneSettingsComponent.Default.AreaColor.value"
                    id="areaColor">
            </div>
        </div>

        <div class="slider-group">
            <span>车道线透明度</span>
            <input class="lane-alpha-slider" type="range" name="车道线识别" id="车道线识别 - 车道线透明度" min="0" max="100"
                step="0.001" v-model="LaneSettingsComponent.Default.LaneAlpha.value">
        </div>
        <div class="slider-group">
            <span>车道区域透明度</span>
            <input class="area-alpha-slider" type="range" name="车道线识别" id="车道线识别 - 车道区域透明度" min="0" max="100"
                step="0.001" v-model="LaneSettingsComponent.Default.AreaAlpha.value">
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref, Ref, watch } from 'vue';
import { LaneSettingsComponent } from './BinocularCameraComponent';

const canvas: Ref<HTMLCanvasElement | null> = ref(null);

const blurLevelValue = computed(() => `${(LaneSettingsComponent.Default.BlurLevel.value - 1) * 25}%`);

function OnInput(event: Event): void {
    if ((event as InputEvent).data == null) {
        (event.target as HTMLInputElement).value = '0';
    }
}
const laneAlphaValue = computed(() => `${LaneSettingsComponent.Default.LaneAlpha.value}%`);
const areaAlphaValue = computed(() => `${LaneSettingsComponent.Default.AreaAlpha.value}%`);

watch(LaneSettingsComponent.Default.Points, DrawArea);

function DrawArea(): void {
    if (canvas.value == null) {
        return;
    }

    const context = canvas.value.getContext('2d');
    if (context == null) {
        return;
    }

    const width = canvas.value.width;
    const height = canvas.value.height;

    context.clearRect(0, 0, width, height);

    context.fillStyle = '#00ffff4d';
    context.strokeStyle = 'green';
    context.lineWidth = 2;
    context.textAlign = 'center';

    context.beginPath();
    context.moveTo(LaneSettingsComponent.Default.Points[0].X * width * 0.01, LaneSettingsComponent.Default.Points[0].Y * height * 0.01);
    for (let i = 1; i < LaneSettingsComponent.Default.Points.length; ++i) {
        context.lineTo(LaneSettingsComponent.Default.Points[i].X * width * 0.01, LaneSettingsComponent.Default.Points[i].Y * height * 0.01);
    }

    context.closePath();
    context.fill();
    context.stroke();
}
</script>

<style scoped>
.lane-settings {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;

    gap: 2rem;

    padding: 2rem 3.5rem;
}

.slider-group-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem;
}

.settings-group-container>span,
.detection-group-container>span,
.slider-group-container>span,
.area-group>span {
    color: #81859C;
    font-size: 1.4rem;
}

.slider-group {
    display: flex;
    justify-content: stretch;
    align-items: center;
    gap: 1rem;
}

.slider-group>span {
    min-width: 40%;

    color: #B1B1D4;
    font-size: 1.4rem;
    white-space: nowrap;
}

.slider-group>input {
    width: 100%;
    height: 0.6rem;

    border-radius: 0.3rem;

    background-image: linear-gradient(90deg, #807DE1 0%, #218CDE 100%);
    background-color: #B1B1D41A;
    background-repeat: no-repeat;

    appearance: none;
}

.slider-group>input::before {
    content: '';
    background-color: #B1B1D41A;
}

.slider-group>input::-webkit-slider-thumb {
    appearance: none;

    position: relative;
    width: 2rem;
    height: 2rem;

    border-radius: 50%;
    background: linear-gradient(180deg, #807DE1 0%, #218CDE 100%);

    cursor: pointer;
}

.blur-slider {
    background-size: v-bind(blurLevelValue);
}

.lane-alpha-slider {
    background-size: v-bind(laneAlphaValue);
}

.area-alpha-slider {
    background-size: v-bind(areaAlphaValue);
}

.settings-group-container,
.detection-group-container,
.area-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem;
}

.point>span:nth-of-type(1) {
    color: #81859C;
    font-size: 1.6rem;

    margin-right: 2rem;
}

.point>span:nth-of-type(4) {
    margin-left: 2rem;
}

.point>span:nth-of-type(2),
.point>span:nth-of-type(4) {
    color: #B1B1D4;
    font-size: 1.4rem;
}

.point>span:nth-of-type(3),
.point>span:nth-of-type(5) {
    color: #B1B1D4;
    font-size: 1.4rem;
}

.detection-group>input,
.point>input {
    width: 6rem;
    height: 2.4rem;

    margin-left: 0.5rem;
    margin-right: 0.5rem;

    color: white;
    text-align: center;

    border: solid 0.1rem #36384B;
}

.detection-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.detection-group>span {
    color: #B1B1D4;
    font-size: 1.6rem;
    line-height: 1.6rem;

    margin-right: 2rem;
}

.detection-group>span:last-of-type {
    margin-left: 3rem;
}

.settings-group {
    display: flex;
    flex-direction: row;

    justify-content: space-between;
}

.settings-group>label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.settings-group>label>span {
    color: #B1B1D4;
    font-size: 1.6rem;
}

.settings-group>input:checked+label>span {
    color: white;
}

canvas {
    width: 25rem;
    height: 11.5rem;

    border-radius: 1rem;

    background-color: #81859C1F;
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    display: none;
}
</style>